<template>
  <a-card :title="title">
    <a-card-grid
      style="width: 10%;height: 80px; text-align: center"
      :hoverable="false">序号</a-card-grid>
    <!-- <a-card-grid
      style="width: 10%;height: 80px;text-align: center"
      :hoverable="false">阶梯</a-card-grid> -->
    <a-card-grid
      style="width: 40%;height: 80px; text-align: center"
      :hoverable="false">备注</a-card-grid>
    <a-card-grid
      style="width: 30%;height: 80px; text-align: center"
      :hoverable="false">基数转折点(¥)</a-card-grid>
    <a-card-grid
      style="width: 20%;height: 80px; text-align: center"
      :hoverable="false">比例</a-card-grid>
    <template v-for="i in count">
      <a-card-grid
        :key="`${i}_1`"
        style="width: 10%;height: 80px; text-align: center"
        :hoverable="false">{{ i }}</a-card-grid>
      <a-card-grid
        :key="`${i}_3`"
        style="width: 40%;height: 80px; text-align: center"
        :hoverable="false">
        <div>
          <span>{{ showMarkMoney(steps, i - 1) }}</span>
        </div>
      </a-card-grid>
      <a-card-grid
        :key="`${i}_4`"
        style="width: 30%;height: 80px; text-align: center"
        :hoverable="false">
        <div>
          <div
            v-show="edit && i !==4"
            style="left: -10px; width: 90%; top: -23px;text-align: left;">
            <a-input-number
              :min="0"
              :precision="2"
              v-model="currentSteps[i - 1]"
              placeholder="请输入基数转折点(¥)" />
          </div>
          <span v-show="!edit || i == 4">{{ showMonney(steps[i - 1]) }}</span>
        </div>
      </a-card-grid>
      <a-card-grid
        :key="`${i}_5`"
        style="width: 20%;height: 80px; text-align: center"
        :hoverable="false">
        <div>
          <div
            v-show="edit"
            style="left: -10px; width: 90%; top: -23px;text-align: left;">
            <!-- <div>请输入该阶梯值的比率(%)</div>
            <div>当前值为{{ rates[i - 1] }}%</div> -->
            <a-input-number
              :min="0"
              :max="100"
              :precision="2"
              v-model="currentRates[i - 1]"
              placeholder="请输入固定比率(%)" />
          </div>
          <span v-show="!edit">{{ showRate(rates[i - 1] ? (rates[i - 1] * 100).toFixed(2) : undefined) }}</span>
        </div>
      </a-card-grid>
    </template>
  </a-card>
</template>
<script>
import { showMarkMoney, showMonney, showRate } from './config'

export default {
  name: 'StepBonus',
  components: {},
  props: {
    title: {
      type: String,
      default: () => ''
    },
    count: {
      type: [Number, String],
      default: () => ''
    },
    rates: {
      type: Array,
      default: () => []
    },
    steps: {
      type: Array,
      default: () => []
    },
    // marks: {
    //   type: Array,
    //   default: () => []
    // },
    edit: {
      type: Boolean,
      default: () => false
    }
  },
  watch: {
    edit: function (edit) {
      if (edit) {
        // this.currentMarks = this.marks.slice(0)
        this.currentRates = this.rates.slice(0).map(item => item ? (item * 100).toFixed(4) : undefined)
        this.currentSteps = this.steps.slice(0)
      }
    }
  },
  data () {
    this.showMarkMoney = showMarkMoney
    this.showMonney = showMonney
    this.showRate = showRate
    return {
      // edit: false,
      // currentAmount: 0,
      currentRates: [],
      // currentMarks: [],
      currentSteps: []
    }
  },
  methods: {
    getValue () {
      /**
       * currentMarks 基数
       * currentRates 比率
       * currentSteps 阶梯
       */
      return {
        // marks: this.currentMarks,
        rates: this.currentRates.map(item => item ? (item / 100).toFixed(6) : undefined),
        steps: this.currentSteps,
        count: 4
      }
    }
  }
}
</script>
